<template>
	<view class="wrap-item" v-if="item">
		<view class="flex align-center just-between" @click="onChooseArea">
			<view class="title-bg f-30 flex">
				<view class="must" v-if="item.require">*</view>

				<view class="title">{{ item.title }}</view>
			</view>

			<image class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
		</view>

		<view class="area-list m-t-30" v-if="value !== ''">
			<block v-for="(areaItem, index) in value === '' ? [] : value.split(',')" :key="index">
				<view class="area-item flex align-center just-between">
					<view class="area limlimit-num-line f-30">{{ areaItem }}</view>

					<image class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
		},
		mounted() {
			uni.$on("areaChoose", (area) => {
				this.$emit("input", area);
			});
		},
		methods: {
			/**
			 * 选择地区
			 */
			onChooseArea() {
				this.$jump.to(`/pages/publish/chooseArea?before=${this.value}`);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/publish.css";

	.arrow {
		width: 14rpx;
		height: 24rpx;
	}

	.area-list {
		width: 100%;
		overflow: hidden;
	}

	.area-item {
		width: 100%;
		overflow: hidden;
		margin-bottom: 30rpx;
		gap: 20rpx;

		&:last-child {
			margin-bottom: 0rpx;
		}

		.area {
			--limit-num: 1;
			color: #666666;
		}
	}
</style>
